//  首先是获取信息 并且渲染到页面上
//获取弹层对象
var layer = layui.layer
// 获取表单对象
var form = layui.form
getInfo()

function getInfo() {
    $.ajax({
        url: '/admin/links',
        success: function (res) {
            if (res.status !== 0) {
                return layer.msg('获取信息失败')
            }
            // console.log(res);
            //接着就是使用模板引擎 使用  第一个是模板的id 第二个就是要渲染的数据
            var htmlStr = template('tpl', res)
            // console.log(htmlStr);
            //将这个html解耦渲染到页面
            $('tbody').html(htmlStr)
        }
    })
}

// 
form.verify({
    url: [
        /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/,
        '验证失败'
    ]
})
//添加链接功能
//点击添加链接 弹层对象出来
$('#add-link').on('click', function () {
    var index = layer.open({ //这个属性是用来关闭弹层对象的
        type: 1, //这个就是设置页面层
        title: '添加友情链接',
        content: $('#add-form-tpl').html(),
        area: ['500px', '350px']
    });

    //点击上传文件按钮 触发隐形的文件框的点击事件
    $('#urlIcon').on('click', function () {
        $('#linkFile').click()
    })

    // 监听文件选中事件
    $('#linkFile').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0]) //这里是获取当前选中的图片一个64位格式的内存地址
        $('#preIcon').attr('src', objectURL) //这里就是将 图片的那个标签设置为当前的获取到的64位格式地址
    })

    //不用单击重置按钮 因为type类型是reset就可以重置了

    //给表单添加表单提交事件
    $('#add-form').on('submit', function (e) {
        //阻止表单默认行为
        e.preventDefault()
        var fd = new FormData(this) //这里是指收集当前的表单数据
        // var data = $(this).serialize()
        // console.log(data);
        $.ajax({
            type: 'post',
            url: '/admin/links',
            data: fd,
            processData: false, //这两个参数是用formdata数据必须设置的
            contentType: false,
            success: function (res) {
                // console.log(res);
                // 判断一下 是否成功 
                if (res.status !== 0) {
                    return layer.msg('添加链接失败')
                }
                layer.msg('添加链接成功', function () {
                    //关闭弹层对象
                    layer.close(index)


                    //重新渲染
                    getInfo()
                })
            }
        })
    })

})


//删除链接模块
// 注意是根据id来的  但是id按钮是动态渲染出来 所以只能用事件委托
$('tbody').on('click', '.delete', function () {

    var id = $(this).attr('data-id')
    // console.log(id);

    layer.confirm('确定好了吗?', {
        icon: 3,
        title: '提示'
    }, function (index) {

        // 发起 ajax请求
        $.ajax({
            type: 'delete',
            url: '/admin/links/' + id, //把这个动态参数传进去
            success: function (res) {
                // console.log(res);
                //判断一下
                if (res.status !== 0) {
                    return layer.msg('删除信息失败')
                }
                //删除链接成功
                layer.msg('删除链接成功', function () {
                    //关闭弹层对象
                    layer.close(index);
                    //重新渲染页面
                    getInfo()
                })


            }

        })

    });

})


//修改友情链接列表 但是要先渲染到表单上 才能进行修改
//点击编辑按钮 但是这里的编辑按钮 是动态渲染的 所以需要事件委托
$('tbody').on('click', '.edit', function () {
    var id = $(this).attr('data-id')
    // console.log(id);


    var index = layer.open({ //这个属性是用来关闭弹层对象的
        type: 1, //这个就是设置页面层
        title: '编辑友情链接',
        content: $('#edit-form-tpl').html(),
        area: ['500px', '350px'] //这个是设置弹层页面有多大
    });
    //然后把对应id内容渲染到页面
    $.ajax({
        type: 'get',
        url: '/admin/links/' + id,
        success: function (res) {
            // console.log(res);
            //判断是否成功 
            if (res.status !== 0) {
                return
            }
            res.data.linkicon = ""
            //接着就是把获取到的数据 渲染到数据上
            form.val('edit-form', res.data)

        }
    })

    //点击上传文件按钮 触发文件选择框的点击事件
    $('#edit-button').on('click', function () {
        $('#edit-file').click()
    })
    $('#edit-file').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0]) //这里是获取当前选中的图片一个64位格式的内存地址
        $('#preIcon').attr('src', objectURL) //这里就是将 图片的那个标签设置为当前的获取到的64位格式地址
    })
    //再就是给表单设置提交事件  通过id
    $('#edit-form').on('submit', function (e) {
        //阻止表单默认提交
        e.preventDefault()
        var fd = new FormData(this) //获取表单的数据
        //发起ajax请求
        $.ajax({
            type: 'put',
            url: '/admin/links/' + id,
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                // console.log(res);
                //判断是否获取成功
                if (res.status !== 0) {
                    return layer.msg('修改信息失败')
                }

                //修改信息成功 提示后 关闭模态框 然后更新数据
                layer.msg('更新信息成功', function () {
                    //重新渲染一下数据
                    getInfo()

                    //关闭模态框
                    layer.close(index)

                })
            }
        })
    })


})